<template>
  <div class="page-home">

    <div class="page-home__view">
      <router-view></router-view>
    </div>

    <van-tabbar route active-color="#ff1d41">
      <van-tabbar-item icon="home-o" to="/home">精选</van-tabbar-item>
      <van-tabbar-item icon="photo-o" to="/dramas">演出</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/center">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Home',

  computed: {
    ...mapState(['title'])
  }
}
</script>

<style lang="scss">
@import '../assets/styles/mixins.scss';

.page-home {
  display: flex;
  flex-direction: column;
  height: 100%;
  &__view {
    flex: 1;
    overflow-y: auto;
    background: #fff;
  }
  .van-tabbar {
    position: relative;
  }
}
</style>
